<template>
  <div class="bilingual-select">
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="中文" name="zh">
        <el-select 
          v-model="selectedValue" 
          :placeholder="`请选择${label}（中文）`"
          :disabled="disabled"
          filterable
          style="width: 100%;"
          @change="handleChange"
        >
          <el-option 
            v-for="(obj, i) in options" 
            :key="i" 
            :label="getDisplayName(obj, 'zh')"
            :value="obj.value">
          </el-option>
        </el-select>
      </el-tab-pane>
      <el-tab-pane label="English" name="en">
        <el-select 
          v-model="selectedValue" 
          :placeholder="`Please select ${label} (English)`"
          :disabled="disabled"
          filterable
          style="width: 100%;"
          @change="handleChange"
        >
          <el-option 
            v-for="(obj, i) in options" 
            :key="i" 
            :label="getDisplayName(obj, 'en')"
            :value="obj.value">
          </el-option>
        </el-select>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'BilingualSelect',
  props: {
    value: {
      type: String,
      default: ''
    },
    field: {
      type: String,
      required: true
    },
    label: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeTab: 'zh',
      selectedValue: ''
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.selectedValue = newVal || ''
      }
    },
    selectedValue(newVal) {
      if (newVal !== this.value) {
        this.$emit('input', newVal)
      }
    }
  },
  methods: {
    getDisplayName(obj, lang) {
      if (!obj.name) return ''
      try {
        const json = JSON.parse(obj.name)
        return json[lang] || json.zh || obj.name || ''
      } catch (e) {
        // 如果不是 JSON，可能是旧数据，返回原值
        if (lang === 'zh') {
          return obj.name
        }
        return ''
      }
    },
    handleChange(value) {
      this.selectedValue = value
      this.$emit('input', value)
    }
  }
}
</script>

<style scoped>
.bilingual-select {
  width: 100%;
}
.bilingual-select >>> .el-tabs__content {
  padding: 10px;
}
</style>
